<template>
  <div class="homeNav">
    <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in list" :key="item.id" :index="index">
          <ul>
            <li v-for="(con, i) in item" :key="con.id" :index="i">
              <img :src="con.iconUrl" alt="">
              <span>{{con.navText}}</span>
            </li>
          </ul>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'NavIcon',
  props: ['Newlist'],
  data () {
    return {
      swiperOn: false,
      iconList: [
      ],
      swiperOption: {
        pagination: '.swiper-pagination'
      },
      list: {}
    }
  },
  methods: {
    getInfo () {
      var that = this
      var json = {}
      setTimeout(function () {
        that.list = that.Newlist
        that.list.forEach((con, index) => {
          if (json[parseInt(index / 8)] === undefined) {
            json[parseInt(index / 8)] = []
          }
          json[parseInt(index / 8)].push(con)
        })
        that.list = json
      }, 100)
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.homeNav .swiper-container
  padding-bottom: .8rem;
.homeNav
  width 100%;
  ul
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    li
      width: 25%;
      margin-top: .2rem;
      img
        width: 1.1rem;
        display: block;
        margin: 0 auto;
      span
        font-size: .28rem;
        display: block;
</style>
